<template>
    <FormItem :label="`${itemData.label}：`"
              :prop="itemData.name"
              :label-for="itemData.name"
              :rules="itemData.rules">
        <template v-if="itemData.type === 'input' && itemData.isRange">
            <Row>
                <Col span="10">
                <Input v-model="itemData.valueS"
                       :placeholder="itemData.placeholder"
                       :element-id="itemData.name">
                <span v-if="itemData.prepend && itemData.prepend !== ''"
                      slot="prepend">{{itemData.prepend}}</span>
                <span v-if="itemData.append && itemData.append !== ''"
                      slot="append">{{itemData.append}}</span>
                </Input>
                </Col>
                <Col span="4"
                     class="qw-text-c">-</Col>
                <Col span="10">
                <Input v-model="itemData.valueE"
                       :placeholder="itemData.placeholder"
                       :element-id="itemData.name">
                <span v-if="itemData.prepend && itemData.prepend !== ''"
                      slot="prepend">{{itemData.prepend}}</span>
                <span v-if="itemData.append && itemData.append !== ''"
                      slot="append">{{itemData.append}}</span>
                </Input>
                </Col>
            </Row>
        </template>
        <template v-else-if="itemData.type === 'input'">
            <Input v-model="itemData.value"
                   :placeholder="itemData.placeholder"
                   :element-id="itemData.name"
                   @on-change="handleInputChange" />
        </template>
    </FormItem>
</template>
<script>
    export default {
        props: {
            itemData: {
                type: Object
            }
        },
        data () {
            return {
                dataList: []
            };
        },
        created () { },
        methods: {
            handleInputChange () {
                this.$emit('handleChangeFormData', this.itemData)
            }
        }
    }
</script>
